<!DOCTYPE HTML>
<html lang="zh-Hans">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-title" content="手机端标题">
	<meta http-equiv="Cache-Control" content="no-siteapp">
	<meta name="author" content="鄧先森">
	<link rel='stylesheet' href='css/css.css' type='text/css'/>
	<link rel='stylesheet' href='css/font-awesome.min.css' type='text/css'/>
	<link rel='stylesheet' href='css/style.css' type='text/css'/>
	<link rel='stylesheet' href='css/timeline.css' type='text/css'></li>
	<!--[if lte IE 9]><link rel="stylesheet" href="css/ie9.css" /><![endif]-->
    <!--[if lte IE 8]><link rel="stylesheet" href="css/ie8.css" /><![endif]-->
	<link rel="shortcut icon" type="image/ico" href="images/favicon.ico">
	<title>网页端标题</title>
	<script src="js/jquery.min.js"></script>
	<script src="js/skel.min.js"></script>
	<script src="js/util.js"></script>
	<script src="js/respond.min.js"></script>
	<script src="js/sakula.js"></script>
	<script src="js/modernizr.js"></script>
	<!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->
<style>
        #skPlayer{
            margin:27px auto 0;
        }
        .container{
            margin-top:200px;
        }
        @media screen and (max-width:768px){
            body{
                width:100%;
            }
            
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <article id="home" class="panel special" style="display: flex;">
            <div class="image" style="background-position: center center;">
                <img src="https://s1.ax1x.com/2022/05/07/OQAxpD.jpg" alt="" data-position="center center" style="display: none;">
            </div>
            <div class="content">
                <div class="inner">
                    <header>
                        <h1>主页标题</h1>
                        <p><script src="https://tenapi.cn/yiyan/get/?code=js"></script></p>
                    </header>
                    <nav id="nav">
                        <ul class="actions vertical special spinY">
                            <li><a href="#about-us" class="button">选项一</a>
                            </li>
                            <li><a href="#toyou" class="button">选项二</a>
                            </li>
							<li><a href="#timeline" class="button">时间轴</a>
                            </li>
                </div>
            </div>
        </article>
        <article id="about-us" class="panel secondary inactive" style="display: none;">
            <div class="image" style="background-position: center center;">
                <img src="images/image5.jpg" alt="" data-position="center center" style="display: none;">
            </div>
            <div class="content">
                <ul class="actions spinX">
                    <li><a href="#home" class="button small back">返回</a>
                    </li>
                </ul>
                <div class="inner">
                    <header>
                        <h2>关于我们</h2>                        
                    </header>
                    <p>
                        咋说呢，就碰巧被我撞见了嘛，然后费尽心思给骗到了手，就是这么简单的事情。<br>
                    	高中的时候，有一段时间挺喜欢看斯蒂芬.金的小说，记得好像是在肖申克的救赎那本书后面有几个他的短篇集，当时里面有一句话我挺喜欢的
                        <blockquote>
                            It's not the matter how the story is, but the people who told this story.<br>
                            讲故事的人，往往比故事本身更加精彩。
                        </blockquote>
                        既然遇见了，那么感谢相遇，讲好我们的故事。
                    </p>
                    
                </div>
            </div>
        </article>
        <article id="toyou" class="panel secondary inactive" style="display: none;">
            <div class="image" style="background-image: url('https://i.loli.net/2021/04/29/CqMRlzw41oA9cys.jpg'); background-position: center center;">
                <img src="https://i.loli.net/2021/04/29/CqMRlzw41oA9cys.jpg" alt="" data-position="center center" style="display: none;">
            </div>
            <div class="content">
                <ul class="actions spinX">
                    <li><a href="#home" class="button small back">返回</a>
                    </li>
                </ul>
                <div class="inner">
                    <header>
                        <h2>写给小钟</h2>
                        <blockquote>
                            我说不出来为什么爱你，但我知道，你就是我不爱别人的理由<br>
                            ——《虞美人盛开的山坡》
                        </blockquote>
                    </header>
                    <p>
                        坐在病床上，对着屏幕发呆，想了很久，不知道该从哪里写起，但我确确实实是在想你。<br>
                        还记得第一次和你说话，是给你发短信，让你来参加面试，好家伙，第一次遇到这么懒的学妹，好在我爱才心切<del>bushi</del>。
                        还是找主席一顿操作把你收进了易班，当时我还只是觉得至少部门里招了个学妹进来不会全都是男生了。
                        第一次见你是在二面的时候，你给我的第一印象就是，这小女孩挺能说的，吵架肯定很难对付。
                        因为答应了你来部门可以有团建活动<del>吃吃喝喝</del>，又不想其他的部长有意见，就一口答应把你收在了技术。
                        从那天起，其实在我心里你的位置已经在慢慢变化了。
                    </p>
                    <p>
                        <b>“古灵精怪的学妹"</b>这是我最开始给你的评价。你是个老二次元了，这一点从你的空间里可以窥见一二。
                        应该就是二面那天，你说你想逛一下学校，也不知道是咋想的，满脸兴奋的答应了下来带你逛学校；
                        半个月没刮的胡子，对着镜子刮了半天，买了从来没喷过的香水喷了好几下，平时懒得管的头发，业找室友借了发胶定了个型。
                        找主席借了车，在香樟的灯下等你。
                        <blockquote><b>"灯下最帅的哪个崽就是我。"</b></blockquote>
                        那天晚上算是我们的第一次正式见面。你穿了一条长裙，我当时心里是很激动的，又是第一次载女孩子，就只能坐车上假装镇定。
                        虽然感觉晚上看学校挺奇怪的，但是气氛挺好，话痨的我说了挺多的，就是不知道你记住多少。<br>
                        那天晚上回到香樟门口，又坐在车上说了很多，我记得我给你说过<b>“答应了的事情，就一定要做到；我最讨厌看到别人失望的眼神。”</b>
                        但是我似乎并没有做到这一点，答应你的要去欢乐谷，就一直拖着，十一月忙，十二月被隔离，一月放假，回学校又开始忙，终于忙完了，我受伤了；
                        好家伙这下又只能推到明年了。责任在我，得给你道歉。<br>
                        然后就是吃吃喝喝，当初也是靠这个承诺把你吸引<del>(huo)</del>到易班的，基本上理工周围好吃的都吃了一圈，那下一个小目标应该就是把成华区的
                        好吃的都吃一次。盒盒盒，似乎也不太好实现（指囊中羞涩）。<br>
                        说到这里，就想起来有这个愿望清单：<br>
                        <li><del>坐东郊的小火车</del></li>
                        <li>去熊猫基地康康熊猫</li>
                        <li>去省博or画展</li>
                        <li>去欢乐谷→迪士尼(如果有钱了)</li>
                        <li>去茶卡盐湖看星星</li><br>
                        似乎想的有点远了，但是生活总是要有些期待的嘛。可能是高中语文老师给我的影响吧，我觉得我多少有些理想主义，喜欢想一些很理想化的东西，比如上面
                        写的看星星，我总觉得躺在一片星空下是一件很美的事情，可以啥都不干就看星星，吹吹风，就觉得很棒了。<br>
                    </p>
                    <p>
                        这次受伤，我也想了很多，手术完那天晚上，麻药过了劲，真的疼到让人崩溃，肉疼，骨头也疼；找你，你说你在打游戏，说实话我看到这句回复的时候真的很
                        生气，很难受，就想起了那句应该是女生说的话，游戏重要还是我重要。但是一针吗啡打完，不疼了，冷静下来你也回我消息了，我觉得能理解，
                        但是我还是希望，你能在游戏之外的时间，我留一点，我不多要，我只想我给你的消息不是对着空气说话，能有回音，就够了。这个应该不过分吧。
                    </p>
                    <p>
                        吧啦吧啦，这个小网页从三月开始策划，四月开始写，月初写到了月底，也不是很多，但也不少。就先写这么多吧，住院住傻了，也不知道还有啥想说的了。<br>
                        哦，还有一句：“<b>我喜欢你~</b>”
                    </p>
                </div>
            </div>
        </article>
 <article id="timeline" class="panel secondary inactive" style="display: none;">
            <div class="content content1">
                <!-- <div class="inner"> -->
                    <div class="headertl" >
                    	<h1>Story<br>of<br>Mr.Deng & Ms.Zhong</h1>
                    </div>
                    
                    <section id="cd-timeline" class="cd-container">
                    
                    	<div class="cd-timeline-block">
                    		<div class="cd-timeline-img cd-location">
                    			<!-- <img src="images/cd-icon-location.svg" alt="Location"> -->
                    		</div> <!-- cd-timeline-img -->
                    
                    		<div class="cd-timeline-content">
                    			<h2>第一次亲亲</h2>
                    			<p>
                                    那天晚上，月黑风高，邓先森搂着小钟再香樟食堂门口的台阶上坐着，心里扑通扑通的跳，在小钟说到她老婆的时候，捧起她的脸<br>
                                    <blockquote>有老婆了不介意再多一个男朋友吧？</blockquote>
                                    邓先森鼓起了老大的勇气，凑了上去，还好没有迎来耳光。<br>
                                    嗯，女孩子的嘴也是软软的。
                                </p>
                    			<!-- <a href="#" class="cd-read-more">阅读更多</a> -->
                    			<span class="cd-date">2020.11.14</span>
                    		</div> <!-- cd-timeline-content -->
                    	</div> <!-- cd-timeline-block -->
                    
                    	<div class="cd-timeline-block">
                    		<div class="cd-timeline-img cd-location">
                    			<!-- <img src="images/cd-icon-location.svg" alt="Location"> -->
                    		</div> <!-- cd-timeline-img -->
                    
                    		<div class="cd-timeline-content">
                    			<h2>第一次牵手</h2>
                    			<p>
                    				晚上，邓先森送钟小姐回宿舍，走到香樟花田，鼓足了勇气<br />
                    				<strong>我这个手有点闲，要不给你拉一下？</strong><br />
                    				迟疑了一秒，手放在了一起<br />
                    				第一次牵手，要说感觉，就是一个字——软，毕竟没牵过别人的，盒盒盒
                    				<img src="https://i.loli.net/2021/03/17/rdWCPpJY3IoEyAN.png" width=75%/>
                    			</p>
                    			<!-- <a href="#" class="cd-read-more">阅读更多</a> -->
                    			<span class="cd-date">2020.10.27</span>
                    		</div> <!-- cd-timeline-content -->
                    	</div> <!-- cd-timeline-block -->
                    
                    	<div class="cd-timeline-block">
                    		<div class="cd-timeline-img cd-picture">
                    			<!-- <img src="images/cd-icon-picture.svg" alt="Picture"> -->
                    		</div> <!-- cd-timeline-img -->
                    
                    		<div class="cd-timeline-content">
                    			<h2>一切从这里开始</h2>
                    			<p>
                    				邓先森在青协招新的时候一眼相中了钟小姐的简历，于是就找到青协的部长要人<del>(唯唯诺诺)</del>。不过好在胖胖也很给面子，痛快的答应了。<br>
                    				我们的故事，也就开始了~<br/>
                    				<img src="https://i.loli.net/2021/03/17/mItioCV6sBYp9xZ.jpg" width=75%/>
                    			</p>
                    			<span class="cd-date">2020.9.18</span>
                    		</div> <!-- cd-timeline-content -->
                    	</div> <!-- cd-timeline-block -->
                    </section> <!-- cd-timeline -->
                    <ul class="actions spinX">
                        <li><a href="#home" class="button small back">返回</a>
                        </li>
                    </ul>
                <!-- </div> -->
            </div>
 </article>
        <footer id="footer" class="">
            <p class="copyright">2020 — 2021 <a target="_blank" href="你的coding page链接">&copy;❤女朋友名字</a></p>
            <p class="copyright">遇见的第<span id="t_d"></span>
                <span id="t_h"></span>
                <span id="t_m"></span>
                <span id="t_s"></span>
            </p>
        </footer>
    </div>
    <!--[if lte IE 8]><![endif]-->
    <script>
        function getRTime(){
                            var EndTime= new Date('2020/09/18 18:30:00'); //截止时间
                            var NowTime = new Date();
                            var t =NowTime.getTime() - EndTime.getTime();
                            var d=Math.floor(t/1000/60/60/24);
                            var h=Math.floor(t/1000/60/60%24);
                            var m=Math.floor(t/1000/60%60);
                            var s=Math.floor(t/1000%60);
                    
                            document.getElementById("t_d").innerHTML = d + " 天";
                            document.getElementById("t_h").innerHTML = h + " 时";
                            document.getElementById("t_m").innerHTML = m + " 分";
                            document.getElementById("t_s").innerHTML = s + " 秒";
                        }
                        setInterval(getRTime,1000);
        (function($) {
            skel.breakpoints({
                xlarge: '(max-width: 1680px)',
                large: '(max-width: 1280px)',
                medium: '(max-width: 980px)',
                small: '(max-width: 736px)',
                xsmall: '(max-width: 480px)',
                xxsmall: '(max-width: 360px)'
            });
            $(function() {
                var $window = $(window),
                    $document = $(document),
                    $body = $('body'),
                    $wrapper = $('#wrapper'),
                    $footer = $('#footer');
                $window.on('load', function() {
                    window.setTimeout(function() {
                        $body.removeClass('is-loading-0');
                        window.setTimeout(function() {
                            $body.removeClass('is-loading-1');
                        }, 1500);
                    }, 100);
                });
                $('form').placeholder();
                var $wrapper = $('#wrapper'),
                    $panels = $wrapper.children('.panel'),
                    locked = true;
                $panels.not($panels.first()).addClass('inactive').hide();
                $panels.each(function() {
                    var $this = $(this),
                        $image = $this.children('.image'),
                        $img = $image.find('img'),
                        position = $img.data('position');
                    $image.css('background-image', 'url(' + $img.attr('src') + ')');
                    if (position) $image.css('background-position', position);
                    $img.hide();
                });
                window.setTimeout(function() {
                    locked = false;
                }, 1250);
                $('a[href^="#"]').on('click', function(event) {
                    var $this = $(this),
                        id = $this.attr('href'),
                        $panel = $(id),
                        $ul = $this.parents('ul'),
                        delay = 0;
                    event.preventDefault();
                    event.stopPropagation();
                    if (locked) return;
                    locked = true;
                    $this.addClass('active');
                    if ($ul.hasClass('spinX') || $ul.hasClass('spinY')) delay = 250;
                    window.setTimeout(function() {
                        $panels.addClass('inactive');
                        $footer.addClass('inactive');
                        window.setTimeout(function() {
                            $panels.hide();
                            $panel.show();
                            $document.scrollTop(0);
                            window.setTimeout(function() {
                                $panel.removeClass('inactive');
                                $this.removeClass('active');
                                locked = false;
                                $window.triggerHandler('--refresh');
                                window.setTimeout(function() {
                                    $footer.removeClass('inactive');
                                }, 250);
                            }, 100);
                        }, 350);
                    }, delay);
                });
                if (skel.vars.IEVersion < 12) {
                    $window.on('--refresh', function() {
                        $wrapper.css('height', 'auto');
                        window.setTimeout(function() {
                            var h = $wrapper.height(),
                                wh = $window.height();
                            if (h < wh) $wrapper.css('height', '100vh');
                        }, 0);
                        if (skel.vars.IEVersion < 10) {
                            var $panel = $('.panel').not('.inactive'),
                                $image = $panel.find('.image'),
                                $content = $panel.find('.content'),
                                ih = $image.height(),
                                ch = $content.height(),
                                x = Math.max(ih, ch);
                            $image.css('min-height', x + 'px');
                            $content.css('min-height', x + 'px');
                        }
                    });
                    $window.on('load', function() {
                        $window.triggerHandler('--refresh');
                    });
                    $('.spinX').removeClass('spinX');
                    $('.spinY').removeClass('spinY');
                }
            });
        })(jQuery);
    </script>
</body>

</html>